<template>
    <div id="receiving">
        <ul class="receivingList">
            <li v-for="(item,index) in receivingName" :key="index">
                <div class="receiving_top">
                    <div class="receiving_active" @click="receivingBtn(item,index)">
                        <span class="radio" :class="{active:isRadio[index]}"></span> 默认地址
                    </div>
                    <div class="receiving_btns">
                        <b @click="edit(item)">编辑</b>
                        <b @click="receiveingDel(item)">删除</b>
                    </div>
                </div>
                <div class="receiving_center" @click="receivingBtn(item,index)">
                    {{item.trueName}} {{item.mobPhone}}
                </div>
                <div class="receiving_bottom" @click="receivingBtn(item,index)">
                    {{item.areaInfo}} {{item.address}}
                </div>
            </li>
        </ul>
        <div class="dangerBtn">
            <yd-button size="large" @click.native="addEdit" type="danger">新建地址</yd-button>
        </div>
    </div>
</template>
<script>

export default {
    name: 'receiving',
    data() {
        return {
            isRadio: [true],
            receivingName: [],
            pay: '0'
        }
    },
    created: function() {
        this.pay = this.$route.query.pay || '0';
        this.init();
    },
    methods: {
        init() {
            this.$dialog.loading.open('请稍后');
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'address/addressList')
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        this.isRadio = [];
                        for (var i = 0; i < response.data.object.length; i++) {
                            var element = response.data.object[i].isDefault;
                            let logot = true;
                            if (element == '1') {
                                this.isRadio.push(true);
                            } else {
                                this.isRadio.push(false);
                            }
                        }
                        this.receivingName = response.data.object;
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        receivingBtn(item, index) {
            this.isRadio = [];
            this.$set(this.isRadio, index, true);
            let msg = {
                addressId: item.addressId,
                trueName: item.trueName,
                regionId: Number(item.regionId),
                areaId: Number(item.areaId),
                cityId: Number(item.cityId),
                address: item.address,
                telPhone: item.telPhone,
                mobPhone: item.mobPhone,
                isDefault: '1'
            }
            this.$dialog.loading.open('正在修改');
            this.$httpAjax.post(this.CONSTANT.wapiBaseUrl + 'address/editAddrUpdate', msg)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status == 200) {
                        this.$dialog.toast({
                            mes: '修改默认地址成功',
                            icon: 'success',
                            timeout: 1200
                        });
                        setTimeout(() => {
                            if (this.pay == '1') {
                                this.$router.go(-1);
                            }
                        }, 200);
                    } else {
                        this.$dialog.toast({
                            mes: '修改失败，请稍后重试',
                            icon: 'error',
                            timeout: 1200
                        });
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        //编辑
        edit(item) {
            this.$router.push({
                name: 'addReceiving',
                query: {
                    msg: item.addressId,
                }
            });
        },
        //新建
        addEdit() {
            this.$router.push('/addReceiving');
        },
        receiveingDel(item) {
            this.$dialog.confirm({
                title: '提示',
                mes: '确定删除该地址？',
                opts: [
                    {
                        txt: '取消',
                        color: false,
                        callback: () => {

                        }
                    },
                    {
                        txt: '确定',
                        color: true,
                        callback: () => {
                            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'address/delAddr?addressId=' + item.addressId)
                                .then((response) => {
                                    if (response.status == 200) {
                                        this.$dialog.toast({
                                            mes: '删除成功',
                                            icon: 'success',
                                            timeout: 1000
                                        });
                                        this.init();
                                    }
                                })
                        }
                    }
                ]
            });
        }
    }
}
</script>
<style  scoped>
.radio {
    display: block;
    float: left;
    width: 0.42rem;
    margin: 0.19rem 0;
    height: 0.42rem;
    box-sizing: border-box;
    border: 1px solid #CDCDCD;
    margin-right: 0.1rem;
    border-radius: 50%;
    position: relative;
}

.dangerBtn {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.25rem;
    height: auto;
    overflow: hidden;
}

.receiving_center {
    width: 100%;
    height: 0.8rem;
    font-size: 16px;
    margin-top: 0.1rem;
    line-height: 0.8rem;
    overflow: hidden;
}

.receiving_bottom {
    width: 100%;
    min-height: 0.6rem;
    font-size: 14px;
    padding-bottom: 0.2rem;
    line-height: 0.4rem;
    overflow: hidden;
}

.receivingList {
    width: 100%;
    height: auto;
    color: #4a4a4a;
    font-size: 14px;
    overflow: hidden;
}

.receivingList li {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.25rem;
    margin: 0 auto;
    background: #fff;
    height: auto;
    margin-bottom: 0.2rem;
    overflow: hidden;
}

.receivingList li:last-of-type {
    margin: 0;
}

.receiving_top {
    width: 100%;
    height: 0.8rem;
    position: relative;
    line-height: 0.8rem;
}

.receiving_active {
    width: 60%;
    height: 100%;
    overflow: hidden;
}

.receiving_top:after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #d9d9d9;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

.receiving_btns {
    position: absolute;
    right: 0;
    top: 0;
    height: 0.8rem;
    width: auto;
    z-index: 1;
}

.receiving_btns b {
    font-weight: 400;
    display: block;
    float: left;
    padding: 0 0.15rem;
}

.receiving_btns b:active {
    color: #EF4F4F;
}

.receiving_top span.active {
    content: '';
    border: 1px solid #EF4F4F;
    display: block;
    position: relative;
}

.receiving_top span.active:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    border-radius: 50%;
    width: 0.3rem;
    height: 0.3rem;
    background: #EF4F4F;
}
</style>